<!--
  ~ Copyright (c) 2017, Hugo Freire <hugo@exec.sh>.
  ~
  ~ This source code is licensed under the license found in the
  ~ LICENSE.md file in the root directory of this source tree.
  -->

<div id="recommendation-dialog">

  <div md-dialog-title>
    <div class="md-dialog-title-left">
      <h2>{{ recommendation.name }}, {{ age || (today | amDifference : recommendation.data.birth_date :'years' ||
        recommendation.data.notifier.age) }}
      </h2>

      <md-icon
        mdTooltip="Created {{ recommendation.createdAt | amTimeAgo }} Updated {{ recommendation.updatedAt | amTimeAgo }}"
        tooltipPosition="bottom">
        info_outline
      </md-icon>
    </div>

    <div class="md-dialog-title-right">
      <button md-icon-button [mdMenuTriggerFor]="menu">
        <md-icon>more_vert</md-icon>
      </button>
      <md-menu #menu="mdMenu">
        <button md-menu-item (click)="checkOut()">
          <md-icon>autorenew</md-icon>
          <span>Check out</span>
        </button>
      </md-menu>
    </div>
  </div>

  <h3>{{ occupation }}</h3>

  <h6>Active {{ recommendation.data.modification_date | amTimeAgo }}</h6>

  <md-dialog-content>

    <md-tab-group>
      <md-tab label="Photos">
        <ng-template md-tab-label>🖼</ng-template>
        <md-grid-list cols="4">
          <md-grid-tile *ngFor="let photo of recommendation.photos">
            <img [@fadeInOut]="fadeInState"
                 alt="placeholder"
                 src=""/>

            <img [@fadeInOut]="fadeOutState"
                 class="thumbnail"
                 [src]="photo.url"
                 mdTooltip="Similarity: {{photo.similarity}}%"
                 tooltipPosition="bottom"
                 width="100"
                 onError="this.src = './assets/images/placeholder.jpg'"
                 (load)="isLoaded($event)"/>
          </md-grid-tile>
        </md-grid-list>
      </md-tab>

      <md-tab label="Description">
        <ng-template md-tab-label>🗒</ng-template>
        <div>
          <p md-line>{{ description }} </p>
        </div>
      </md-tab>
    </md-tab-group>

  </md-dialog-content>

  <md-dialog-actions>
    <button md-raised-button
            md-button
            md-small
            color="primary"
            [disabled]="recommendation.isLike || recommendation.isPass"
            (click)="like()">Like
    </button>

    <button md-button
            [disabled]="recommendation.isLike || recommendation.isPass"
            (click)="pass()">Pass
    </button>
  </md-dialog-actions>
</div>
